<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>老师所带学员数据展示图标</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:400px;"></div>
<div id="main1" style="width: 500px;height:400px;"></div>
<script type="text/javascript">
    var userName = getParams("userName");
    console.log(userName);
    //获取传过来的值方法封装
    function getParams(key) {
        var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        var r = encodeURI(window.location.search).substr(1).match(reg);
        if (r != null) {
            //将中文编码的字符重新变成中文
            return decodeURI(unescape(r[2]));
        }
        return null;
    };
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var myChart1 = echarts.init(document.getElementById('main1'));



    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
    var label = [];
    var value = [];
    setTimeout(function () {
        $.ajax({
            url: "/student/student/countdata",
            type: 'post',
            datatype: 'json',
            data:{username:userName},
            success: function (data) {
                $.each(data,function (i,p) {
                    label[i] = (data[i].title),
                    value[i] = {'name':data[i].title,'value':data[i].count};
                })

                console.log(label);
                console.log(value);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '所带学员数量展示',
                        x:'center'
                    },
                    tooltip: {},
                    legend: {
                        orient : 'vertical',
                        //data: ['总数', '活跃人数','非活跃人数','休学人数','失联人数'],
                         data:label,
                        x : 'left'
                    },
                    series : [
                        {
                            name: '学员数量',
                            type: 'pie',
                            radius: '55%',
                            data:value
                        }
                    ]
                };
                myChart.setOption(option);
                myChart1.setOption(option);
            }
        })
    }, 1);
</script>
</body>
</html>